<template>
	<div class="ui-module-cell" :class="{'hover': hover, 'active': selected }" @mouseover="hover = true" @mouseout="hover = false" @click="handleClick">
		<div class="ui-module-cell-body">
			<slot></slot>
		</div>
		<div class="ui-module-cell-handle">
			<div class="ui-module-cell-options" @click.stop>
				<Poptip
			        confirm
			        title="是否确定删除此模块？"
			        :width="176"
			        @on-ok="handleRemove"
			    >
			        <div class="ui-module-cell-remove noselect">删除</div>
			    </Poptip>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'moduleCell',
	props: {
		name: String,
		index: Number,
		selected: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			hover: false
		}
	},
	methods: {
		handleClick() {
			this.$emit('on-change', this.index, this.name);
		},
		handleRemove() {
			this.$emit('on-remove', this.index);
		}
	}
}
</script>

<style>
</style>